'use strict';
import React, { useEffect, useRef } from 'react';
import { Form, Select, Input } from 'antd';
import { layout } from '../conf';
import styles from './index.less';

/*
* 组件注释
* create by wuqiong
* creation time 2022/06/15
* 流转条件
* */
const { Option } = Select
const { TextArea } = Input
const Index = (props) => {
  const { businessObject } = props;
  const dataRef = useRef({})
  const [form] = Form.useForm(null);

  const resetFlowCondition = () => {
    dataRef.current.bpmnElement = window.bpmnInstances.bpmnElement;
    dataRef.current.bpmnElementSource = dataRef?.current?.bpmnElement.source;
    dataRef.current.bpmnElementSourceRef = dataRef?.current?.bpmnElement.businessObject.sourceRef;
    if (dataRef?.current?.bpmnElementSourceRef && dataRef?.current?.bpmnElementSourceRef.default && dataRef?.current?.bpmnElementSourceRef.default.id === dataRef?.current?.bpmnElement.id) {
      // 默认
      form.setFieldsValue({ type: "default" })
    }
    else if (!dataRef?.current?.bpmnElement.businessObject.conditionExpression) {
      // 普通
      form.setFieldsValue({ type: "normal" })
    }
    else {
      // 带条件
      const conditionExpression = dataRef?.current?.bpmnElement.businessObject.conditionExpression;

      let flowConditionForm = { ...conditionExpression, type: "condition" };
      // resource 可直接标识 是否是外部资源脚本
      if (flowConditionForm.resource) {
        flowConditionForm = { ...flowConditionForm, conditionType: "script", scriptType: "externalScript" }
      }
      else if (conditionExpression.language) {
        flowConditionForm = { ...flowConditionForm, conditionType: "script", scriptType: "inlineScript" }
      }
      else {
        flowConditionForm = { ...flowConditionForm, conditionType: "expression" }
      }

      form.setFieldsValue(flowConditionForm)
    }
  }

  const updateFlowType = (flowType) => {
    // 正常条件类
    if (flowType === "condition") {
      dataRef.current.flowConditionRef = window.bpmnInstances.moddle.create("bpmn:FormalExpression");
      window.bpmnInstances.modeling.updateProperties(dataRef?.current?.bpmnElement, {
        conditionExpression: dataRef?.current?.flowConditionRef
      });
      return;
    }
    // 默认路径
    if (flowType === "default") {
      window.bpmnInstances.modeling.updateProperties(dataRef?.current?.bpmnElement, {
        conditionExpression: null
      });
      window.bpmnInstances.modeling.updateProperties(dataRef?.current?.bpmnElementSource, {
        default: dataRef?.current?.bpmnElement
      });
      return;
    }
    // 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
    if (dataRef?.current?.bpmnElementSourceRef.default && dataRef?.current?.bpmnElementSourceRef.default.id === dataRef?.current?.bpmnElement.id) {
      window.bpmnInstances.modeling.updateProperties(dataRef?.current?.bpmnElementSource, {
        default: null
      });
    }
    window.bpmnInstances.modeling.updateProperties(dataRef?.current?.bpmnElement, {
      conditionExpression: null
    });
  }

  const updateFlowCondition = () => {
    const flowConditionForm = form.getFieldsValue();
    const { conditionType, scriptType, body, resource, language } = flowConditionForm;

    let condition;
    if (conditionType === "expression") {
      condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body });
    } else {
      if (scriptType === "inlineScript") {
        condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body, language });
        form.setFieldsValue({ ...flowConditionForm, resource: "" })
      } else {
        condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { resource, language });
        form.setFieldsValue({ ...flowConditionForm, body: "" })
      }
    }
    window.bpmnInstances.modeling.updateProperties(dataRef?.current?.bpmnElement, { conditionExpression: condition });
  }

  useEffect(() => resetFlowCondition(), [businessObject])

  useEffect(() => {
    dataRef.current.bpmnElement = window.bpmnInstances.bpmnElement;
    return () => {
      dataRef.current.bpmnElement = null;
      dataRef.current.bpmnElementSource = null;
      dataRef.current.bpmnElementSourceRef = null;
    }
  }, [])


  return <div className={styles.flowCondition}>
    <Form {...layout} form={form} name="flowCondition">
      <Form.Item name="type" label="流转类型" >
        <Select allowClear onChange={updateFlowType}>
          <Option value={"normal"}>普通流转路径</Option>
          <Option value={"default"}>默认流转路径</Option>
          <Option value={"condition"}>条件流转路径</Option>
        </Select>
      </Form.Item>

      <Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.type !== currentValues.type}>
        {({ getFieldValue, setFieldsValue }) => {
          const type = getFieldValue('type');
          if (type === 'condition') {
            return <React.Fragment>
              <Form.Item name="conditionType" label="条件格式" >
                <Select allowClear >
                  <Option value={"expression"}>表达式</Option>
                  <Option value={"script"}>脚本</Option>
                </Select>
              </Form.Item>
              <Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.conditionType !== currentValues.conditionType}>
                {({ getFieldValue }) => {
                  const conditionType = getFieldValue('conditionType');
                  switch (conditionType) {
                    case 'expression':

                      return <Form.Item name="body" label="表达式" >
                        <Input allowClear onChange={() => updateFlowCondition()} />
                      </Form.Item>

                    case 'script':
                      return <React.Fragment>
                        <Form.Item name="language" label="脚本语言" >
                          <Input allowClear onChange={() => updateFlowCondition()} />
                        </Form.Item>
                        <Form.Item name="scriptType" label="脚本类型" >
                          <Select allowClear placeholder="请选择">
                            <Option value={"inlineScript"}>内联脚本</Option>
                            <Option value={"externalScript"}>外部脚本</Option>
                          </Select>
                        </Form.Item>
                        <Form.Item noStyle shouldUpdate={(prevValues, currentValues) => currentValues.conditionType && prevValues.scriptType !== currentValues.scriptType}>
                          {({ getFieldValue }) => {

                            const scriptType = getFieldValue('scriptType');
                            switch (scriptType) {
                              case 'inlineScript':

                                return <Form.Item name="body" label="脚本" >
                                  <TextArea allowClear onChange={() => updateFlowCondition()} />
                                </Form.Item>

                              case 'externalScript':
                                return <Form.Item name="resource" label="资源地址" >
                                  <Input allowClear onChange={() => updateFlowCondition()} />
                                </Form.Item>
                              default:
                                return null
                            }
                          }}
                        </Form.Item>

                      </React.Fragment>
                    default:
                      return null
                  }
                }}
              </Form.Item>
            </React.Fragment>
          }
          else {
            setFieldsValue({
              conditionType: "expression",
              body: null,
              language: null,
              scriptType: null,
              resource: null,
            })
          }
        }}
      </Form.Item>
    </Form>
  </div>
};
export default Index;
